<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 折叠面板</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseOne">
					点击我进行展开，再次点击我进行折叠。第 1 部分
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
				vice lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseTwo">
					点击我进行展开，再次点击我进行折叠。第 2 部分
				</a>
			</h4>
		</div>
		<div id="collapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
				vice lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseThree">
					点击我进行展开，再次点击我进行折叠。第 3 部分
				</a>
			</h4>
		</div>
		<div id="collapseThree" class="panel-collapse collapse">
			<div id="test" class="panel-heading">
				我是heading
			</div>
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
				vice lomo.
			</div>
			<div class="panel-footer">
				我是.panel-footer
			</div>
		</div>
	</div>

	<div class="panel panel-primary">		
		<div class="panel-heading">
			<h4 class="panel-title col-md-offset-12">
				<a data-toggle="collapse" data-parent="#accordion" 
				   href="#collapse4">
					<span id="s4" class="glyphicon glyphicon-menu-right"></span>
				</a>
			</h4>
		</div>

		<div id="collapse4" class="panel-collapse collapse">
			<div class="panel-body">
				444444444444
			</div>
		</div>
	</div>
</div>

<script>
	
	$('#collapse4').on('show.bs.collapse', function () {
            $("#s4").removeClass("glyphicon-menu-right");
            $("#s4").addClass("glyphicon-menu-down");
    });

    $('#collapse4').on('hide.bs.collapse', function () {            
            $("#s4").removeClass("glyphicon-menu-down");
            $("#s4").addClass("glyphicon-menu-right");
    });
</script>
</body>
</html>